<script setup name="auditHistory">
import { GetHistoryAPI } from '@/api/common.js'

const props = defineProps({
  // 单据号
  auditDoc: {
    type: String,
    default: ''
  },
  // 权限码
  perms: {
    type: String,
    default: ''
  },
  // 左侧标题
  title: {
    type: String,
    default: '审核'
  },
  // 是否存在合同审核
  isContrac: {
    type: Boolean,
    default: false
  }
})

const timeLineList = ref([])

const contracList = ref([])

const getList = async () => {
  // console.log(props.auditDoc)
  const res = await GetHistoryAPI({
    perms: 'order:sale:complaints:review',
    auditDoc: props.auditDoc.salesDocumentNum
  })
  //   方案审核
  const resp = await GetHistoryAPI({
    auditDoc: `${props.auditDoc.salesDocumentNum}${props.auditDoc.id}`,
    perms: 'order:sale:complaints:programmeReview'
  })
  timeLineList.value = res.data
  contracList.value = resp.data
}
getList()
</script>
<template>
  <div class="box">
    <el-tabs type="border-card">
      <el-tab-pane :label="props.title">
        <slot name="body" style="height: 100%"></slot>
      </el-tab-pane>
      <el-tab-pane label="单据审核历史">
        <div class="timelineBox" v-if="timeLineList.length > 0">
          <el-timeline>
            <el-timeline-item
              color="#0bbd87"
              :hollow="true"
              v-for="(item, index) in timeLineList"
              :key="index"
              :timestamp="item.createTime"
              placement="top"
            >
              <el-card class="cardBox">
                <el-form inline>
                  <el-form-item label="审核人">
                    {{ item.auditUserName }}
                  </el-form-item>
                  <el-form-item label="审核角色">
                    {{ item.auditRoleName }}
                  </el-form-item>
                  <el-form-item label="评审状态">
                    {{ item.auditState }}
                  </el-form-item>
                  <div>
                    <el-form-item label="备注">
                      {{ item.auditRemarks }}
                    </el-form-item>
                  </div>
                </el-form>
                <div class="a">
                  <div v-show="item.auditState == '审核通过'" class="yes">审核通过</div>
                  <div v-show="item.auditState == '审核不通过'" class="no">审核不通过</div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="timelineBox" v-else>
          <el-empty :image-size="200" />
        </div>
      </el-tab-pane>
      <!-- 方案审核历史 -->
      <el-tab-pane label="方案审核历史">
        <div class="timelineBox" v-if="contracList.length > 0">
          <el-timeline>
            <el-timeline-item
              color="#0bbd87"
              :hollow="true"
              v-for="(item, index) in contracList"
              :key="index"
              :timestamp="item.createTime"
              placement="top"
            >
              <el-card class="cardBox">
                <el-form inline>
                  <el-form-item label="审核人">
                    {{ item.auditUserName }}
                  </el-form-item>
                  <el-form-item label="审核角色">
                    {{ item.auditRoleName }}
                  </el-form-item>
                  <el-form-item label="评审状态">
                    {{ item.auditState }}
                  </el-form-item>
                  <div>
                    <el-form-item label="备注">
                      {{ item.auditRemarks }}
                    </el-form-item>
                  </div>
                </el-form>
                <div class="a">
                  <div v-show="item.auditState == '审核通过'" class="yes">审核通过</div>
                  <div v-show="item.auditState == '审核不通过'" class="no">审核不通过</div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="timelineBox">
          <el-empty :image-size="200" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.cardBox {
  position: relative;
  overflow: hidden;

  .yes,
  .no {
    width: 120px;
    height: 120px;
    line-height: 120px;
    border-radius: 50%;
    position: absolute;
    top: 8%;
    right: 2%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    transform: rotate(45deg);
  }
}
.yes {
  color: #67c23a;
  border: 5px solid #67c23a;
}

.no {
  color: red;
  border: 5px solid red;
}
.timelineBox {
  height: 500px;
  overflow: auto;
}
.box {
  height: 100%;
}
</style>
